<template>
  <div class="main" style="width: 100%;">
    <div class="main-search-body">
      <div :style="{ width: '100%' }" style="border-radius: 10px;background-color: #ffffff">

        <p class="p-top" style="margin-left: 40px;">校园招聘</p>
        <a-space direction="vertical" size="large" style="width: 100%;margin-right: 10px;" >
          <a-input-search @change="SearchPage"
              :style="{width:'70%'}" style="height: 45px;margin-left: 15%;margin-bottom: 20px;"
                          v-model="searchInput"
                          placeholder="搜索职位、公司"
                          allow-clear >
            <!--        输入框前缀-地图-->
            <template #prefix>
              <a-button type="primary" size="large" style="height: 100%;width: 100px;border-radius:10px 5px 0 10px;"><el-icon><LocationFilled /></el-icon>全国</a-button>
            </template>
          </a-input-search>
        </a-space>


      </div>

      <div class="left-div" :style="{ width: '70%' }" style="display: inline-block;vertical-align: top;">
        <div class="card-demo" @click="goToJobDetail(item.id)" v-for="item in items" style="border-radius: 10px;background-color: #ffffff;position: relative;">

          <div class="card-demo-title">
          <span class="card-demo-title-big">
            {{item.titleName}}
          </span>

            <span>
            {{item.welfare}}
          </span>

          </div>

          <div class="card-demo-left">
            <div class="card-demo-content">
              <p class="card-demo-title-money">{{item.salary}}</p>
              <p class="card-demo-title-year">{{item.employmentOpportunities}}</p>
              <p class="card-demo-title-school">{{item.educationalRequirements}}</p>

            </div>
            <div class="card-demo-content2">
              <p class="card-demo-title-detail">
                {{item.jobDetail}}
              </p>
            </div>
          </div>

          <div class="card-demo-right">
            <div class="card-demo-right-img" style="display: inline-block;">
              <img :src="item.coverPhoto" style="width: 75px;height:75px;border: 1px solid rgba(112,112,112,0.29)">
            </div>
            <p style="position:absolute;display: inline-block;
            top: 5px;left:115px;font-size: 17px;background-color: rgba(255, 255, 255, 0);">
              {{item.corporateName}}
            </p>
            <br>
<!--            <p class="little-back" style="position:absolute;display: inline-block;top: 45px;left:105px;font-size: 10px;">计算机软件</p>-->
            <p class="little-back" style="position:absolute;display: inline-block;top: 45px;left:105px;font-size: 10px;">{{item.corporateLevel}}</p>
            <p class="little-back" style="position:absolute;display: inline-block;top: 45px;left:175px;font-size: 10px;">{{item.companySize}}</p>
          </div>

          <a-divider />
        </div>

        <div style="margin:30px;margin-left: 200px;">
          <a-pagination @change="handleChange"
              :total="total" :current="currentPage" :page-size="currentSize" show-total/>
        </div>
      </div>

      <div class="right-div" :style="{ width: '28%' }" style="display: inline-block;height: 500px;vertical-align: top;margin-left: 10px;">
        <div class="right-div-little"
             style="background: linear-gradient(45deg, #ebdeff, #eeeefa);">
          <div>
            <a-button type="primary" class="right-div-little-button" @click="goTo('/Resume')">上传附件简历</a-button>
          </div>
          <a-button type="primary" class="right-div-little-button">简历模板</a-button>
        </div>
        <!--        <div class="right-div-little">-->
        <!--          看过的职位-->
        <!--        </div>-->
        <div class="right-div-small">
          <img src="../../assets/img/Index/advertise.jpg" style="width: 300px">
        </div>
        <div class="right-div-big">
          <img src="../../assets/img/Index/HB1.png" style="width: 300px">
        </div>
        <div class="right-div-big">
          <img src="../../assets/img/Index/HB2.png" style="width: 300px">
        </div>
        <div class="right-div-big">
          <img src="../../assets/img/Index/HB3.png" style="width: 300px">
        </div>
      </div>


    </div>
  </div>

</template>

<script setup>
import {ElMessage} from "element-plus";
import {useRouter} from 'vue-router'
import {onMounted, ref, watch} from "vue";
import axios from "axios";

//定义保存输入框数据
const searchInput = ref('');
const user = ref(getUser());
// 获取router实例
const router = useRouter();

// id:标识此条笔记
const items = ref([]);

//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(8);
//定义变量保存数据总条目数
const total = ref(8);

const goTo = (path) => {
  if(user.value == null){
    ElMessage.warning("请先注册登录！");
  }else if(user.value.identityId=='20'){
    //如果是hr进行收藏，提示无法收藏
    ElMessage.warning("请将状态切换为‘求职者’");
  }else{
    router.push(path);
  }
};

const goToJobDetail = (id)=>{
  if(user.value == null){
    ElMessage.warning("请先注册登录！");
  }else{
    router.push({ path: 'JobDetail', query: { id:id } });
  }

}

const SearchTotal = (q)=>{
  //查询所有复合条件的字段
  axios.get(`${BASE_URL}/v1/Ssearch/selectAll?q=${q}`).then((response)=>{
    if (response.data.code == 2000) {
      total.value=response.data.data;
      console.log(total.value);
    } else {
      ElMessage.error(response.data.msg);
    }
  })
}

const SearchPage = (q)=>{
  SearchTotal(q);
  //分页按条件查询
  axios.get(`${BASE_URL}/v1/Ssearch/selectByInfo?q=${q}&page=${currentPage.value}&size=${currentSize.value}`)
      .then((response)=>{
      if (response.data.code == 2000) {
        items.value = response.data.data;
        for (let i = 0; i < items.value.length;i++){
          if(items.value[i].educationalRequirements=='10'){
            items.value[i].educationalRequirements='大专';
          }
          else if(items.value[i].educationalRequirements=='20'){
            items.value[i].educationalRequirements='本科';
          }else if(items.value[i].educationalRequirements=='30'){
            items.value[i].educationalRequirements='研究生';
          }
          if(items.value[i].employmentOpportunities=='有'){
            items.value[i].employmentOpportunities='提供转正';
          }
          else if(items.value[i].employmentOpportunities=='无'){
            items.value[i].employmentOpportunities='不提供转正';
          }else if(items.value[i].employmentOpportunities=='面议'){
            items.value[i].employmentOpportunities='面议';
          }
        }
        console.log(response.data.data);
      } else {
        ElMessage.error(response.data.msg);
      }
  })
}

onMounted(() => {
  const query = router.currentRoute.value.query;
  searchInput.value = query.q || '';
  console.log(searchInput.value); // 打印获取到的值到控制台
  SearchTotal(searchInput.value);
  SearchPage(searchInput.value);
  window.scrollTo(0, 0);
})

// 监听 searchInput 的变化
watch(searchInput, (newValue, oldValue) => {
  if (newValue !== oldValue) {
    // 使用 Vue Router 的 push 方法更新 URL
    router.push({
      path: router.currentRoute.value.path, // 保持当前路径不变
      query: { ...router.currentRoute.value.query, q: newValue } // 更新查询参数 q
    });

    // 调用基于新查询参数的操作
    // SearchTotal(newValue);
    // SearchPage(newValue);
  }
});

const handleChange = (page)=>{
  currentPage.value=page;
  SearchPage(searchInput.value);
}

</script>

<style scoped>
.right-div-little-button{
  margin-top: 18px;
  width: 190px;
  border-radius: 10px;
}
.right-div-big {
  width: 100%;
  height: 170px;
  margin: 20px 7px;
  border-radius: 10px;
  overflow: hidden;
}

.right-div-little {
  width: 100%;
  height: 120px;
  margin: 20px 7px;
  border-radius: 10px;
  text-align: center;
}

.right-div-small {
  width: 100%;
  height: 120px;
  margin: 20px 7px;
  border-radius: 10px;
  overflow: hidden;
}

.custom-radio-card {
  padding: 10px 16px;
  border: 1px solid var(--color-border-2);
  border-radius: 4px;
  box-sizing: border-box;
}

.custom-radio-card-mask {
  height: 14px;
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  border: 1px solid var(--color-border-2);
  box-sizing: border-box;
}

.custom-radio-card-mask-dot {
  width: 8px;
  height: 8px;
  border-radius: 100%;
}



.custom-radio-card:hover,
.custom-radio-card-checked,
.custom-radio-card:hover .custom-radio-card-mask,
.custom-radio-card-checked  .custom-radio-card-mask{
  border-color: rgb(var(--primary-6));
}

.custom-radio-card-checked {
  background-color: var(--color-primary-light-1);
}

.custom-radio-card:hover .custom-radio-card-title,
.custom-radio-card-checked .custom-radio-card-title {
  color: rgb(var(--primary-6));
}

.custom-radio-card-checked .custom-radio-card-mask-dot {
  background-color: rgb(var(--primary-6));
}
.information {
  margin-left: 40px;
  font-size: 15px;
}

.information>span {
  display: inline-block;
  margin-bottom: 10px;
}
.dropdown {
  position: relative;
  display: inline-block;
  margin-left: 40px;
  margin-bottom: 15px;
}

/* 下拉内容（默认隐藏）*/
.dropdown-content {
  display: none;
  outline-style: none;
  border-radius: 10px;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 120px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-size: 14px;
  font-family: Microsoft YaHei;
}
/* 下拉列表中的链接 */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* 更改悬停时下拉链接的颜色 */
.dropdown-content a:hover{
  background: linear-gradient(45deg, #a2827f, #855454);color: whitesmoke;border-radius: 11px;transform: scale(1.2); /* （120% 缩放 - 注意：如果缩放太大，它会超出视口） */
}
/* 悬停时显示下拉菜单 */
.dropdown:hover .dropdown-content {display: block;margin-top: 1px;}


.choose-city {
  width: 100%;
  height: 35px;
  margin: 10px 40px 5px 40px;
}

.p-top {
  font-size: 18px;
  background-image: linear-gradient(to right, #7167ab, #5d4785);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  text-decoration: #6c4295;
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
  margin-top: 10px;
}

.p-top::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px; /* 下划线的高度 */
  background: linear-gradient(to right, #8f85c4, #7156a1); /* 颜色渐变 */
}

.card-demo-right {
  position: relative;
  display: inline-block;
  width: 35%;
  overflow: hidden;
  //background-color: #ababab;
  padding-left: 20px;
  margin-top: 10px;
}

* {
  margin: 0;
  padding: 0;
}

span {
  padding-right: 10px;
}
.main {
  background: linear-gradient(to top, #f3f3f3, #efefff);
  padding-top:15px ;
}

.main-search-body {
  width: 75%;
  margin: 0 auto;

}

.card-demo {
  margin-top: 25px;
  transition-property: all;
  border-radius: 10px;
  transition: 0.5s;
}
.card-demo:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.1);
}

.card-demo-title{
  border-radius: 10px 10px 0 0;
  background: linear-gradient(to right, #cfcfe5, #f7f7fd);
  padding: 10px 25px;
}

.card-demo-title-big{
  display: inline-block;
  font-size: 17px;
  margin-right: 25px;
}


.card-demo-left{
  display: inline-block;
  width: 55%;
  position: relative;
  bottom: 15px;
  padding-left: 23px;
  margin-bottom: 10px;
}

.card-demo-content2{
  width: 90%;
}

.card-demo-title-detail{
  background-color: rgba(255, 255, 255, 0);
}

.card-demo-content p {
  display: inline-block;
  margin-bottom: 20px;
}

.card-demo-title-money{
  font-size: 18px;
  color: #001ead;
  margin-right: 20px;
  background-color: rgba(255, 255, 255, 0);
}

.card-demo-title-year{
  color: #3f3f3f;
  font-size: 12px;
  margin-right: 10px;
  padding: 4px;
}

.card-demo-title-school{
  color: #3f3f3f;
  font-size: 12px;
  padding: 4px;
}

.little-back{
  padding: 4px;
}

p {
  /*强制文字不换行*/
  white-space: nowrap;
  /*超出的文字部分隐藏*/
  overflow: hidden;
  /*溢出文字部分替换为省略号*/
  text-overflow: ellipsis;
  background-color: rgba(217, 217, 217, 0.38);
}

.arco-input-suffix {
  margin-left: 5px;
}
</style>
